<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\Design;
use common\models\Cooperator;

?>
<link rel="stylesheet" href="<?= Url::to('@web/web/static/css/index.css') ?>">
<style type="text/css">
    .styles-hide{
        width:70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<!-- banner -->
<div id="banner">
    <div class="ft-carousel">
        <ul class="carousel-inner">
            <li class="carousel-item"><img src="<?= Url::to('@web/web/static/image/index/banner001.jpg') ?>" /></li>
            <li class="carousel-item"><img src="<?= Url::to('@web/web/static/image/index/banner002.jpg') ?>" /></li>
            <a href="https://shop60559652.taobao.com/shop/view_shop.htm?spm=a313o.201708ban.favorite.d53.64f0197afQghK7&mytmenu=mdianpu&user_number_id=32801018"><li class="carousel-item"><img src="<?= Url::to('@web/web/static/image/index/banner003.jpg') ?>" /></li></a>
        </ul>
    </div>
</div>

<!-- search list -->
<div class="contenter mt-20px" id="hot-design">
    <div class="titler"><span class="h3 cl-red">查询设计师</span>需求快速定位</div>
    <form class="conter search flyer-form pane" id="info-search" action="<?= Url::to('@web/search/designer') ?>" method="get">
        <div class="form-item">
            <div class="item-inline fr">
                <div class="input-inline bdn" style="height:40px;"><button class="flyer-button normal narrow border-round" id="search-button"><i class="icon-search"></i> <span>开始搜索</span></button></div>
            </div>
            <div class="item-inline">
                <div class="input-title"><i class="icon-double-angle-right"></i></div>
                <div class="input-inline w-180px"><?= Render::select('search-type', ['1' => '设计师', '2' => '作品'], null, ['flyer' => 'select', 'id' => 'search-type']) ?></div>
            </div>
            <div class="item-inline">
                <div class="input-title"><i class="icon-book"></i> 行业</div>
                <div class="input-inline w-180px"><?= Render::select('category_id[]', [], null, ['flyer' => 'select', 'class' => 'tabler', 'id' => 'category']) ?></div>
            </div>
            <div class="item-inline">
                <div class="input-title"><i class="icon-flag"></i> 风格</div>
                <div class="input-inline w-180px"><?= Render::select('style', Design::$styleSelector, null, ['flyer' => 'select', 'class' => 'tabler']) ?></div>
            </div>
            <div class="item-inline">
                <div class="input-title"><i class="icon-star"></i> 等级</div>
                <div class="input-inline w-180px"><?= Render::select('level', Design::$levelSelector, null, ['flyer' => 'select', 'class' => 'tabler']) ?></div>
            </div>
        </div>
    </form>
</div>

<!--客服右侧悬浮菜单-->
<div class="slide">
    <ul class="icon">
        <li class="up" title="上一页"></li>
        <li class="qq"></li>
        <li class="tel"></li>
        <li class="down" title="下一页"></li>
    </ul>
    <ul class="info">
        <li class="qq">
            <p>在线沟通，请点我<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2971331067&site=qq&menu=yes">在线咨询</a></p>
        </li>
        <li class="tel">
            <p>咨询热线：<br>13208042176<br>客服qq：<br>2971331067</p>
        </li>
    </ul>
</div>
<div id="btn" class="index_cy"></div>
<!-- recommend designer -->
<div class="mt-20px">
    <div class="titler contenter"><a class="more" href="<?= Url::to('@web/search/designer') ?>">查看更多</a><span class="h3 cl-red">推荐设计师</span>美好的设计师来自靠谱的设计师</div>
    <div class="conter" id="recommend-designer">
        <div class="contenter clear" id="show-window">
            <div class="move-button left"><i class="icon-chevron-left"></i></div>
            <div class="move-button right"><i class="icon-chevron-right"></i></div>
            <div class="move-window">
                <?php
                $recommendDesigners = array_chunk($recommendDesigner, 6);
                foreach($recommendDesigners as $recommendDesigner) {
                    ?>
                <div class="contenter clear">
                    <?php
                    foreach ($recommendDesigner as $designer) {
                        ?>
                        <div class="designer-detail boxing">
                            <div class="panel">
                                <div class="header">
                                    <div class="imager"><img src="<?= Render::upload($designer->photo) ?>"></div>
                                    <div class="user">
                                        <h3 class="username"><?= $designer->nickname ?></h3>
                                        <p class="star cl-red"><?= Render::star($designer->star) ?></p>
                                    </div>
                                </div>
                                <div class="bodyer">
                                    <p>类目：<span class="categories"><?= $designer->categoriesString ?></span></p>
                                    <p class="styles-hide">风格：<span class="styles"><?= $designer->stylesString ?></span></p>
                                    <p>软件：<?= $designer->skills ?></p>
                                    <div class="into">
                                        <p>薪资：<?= Render::amount($designer->salary, 0) ?>元</p>
                                        <p><a class="into-ensume"
                                              href="<?= Url::to('@web/seer/resume?id=' . $designer->id) ?>">进入简历
                                                &gt;</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php
                    }
                    ?>
                </div>
                    <?php
                }
                ?>
            </div>
        </div>
    </div>
</div>

<!-- advantage -->
<div class="mt-20px" id="advantage">
    <div class="contenter clear">
        <div class="advantage boxing">
            <div class="panel">
                <div class="imager step1"></div>
                <div class="title">规模全面</div>
                <div class="sub-title">有设计师、客服</div>
            </div>
        </div>
        <div class="advantage boxing">
            <div class="panel">
                <div class="imager step2"></div>
                <div class="title">缴纳保证金</div>
                <div class="sub-title">手持身份证认证和芝麻信用认证缴纳保证金</div>
            </div>
        </div>
        <div class="advantage boxing">
            <div class="panel">
                <div class="imager step3"></div>
                <div class="title">节省成本</div>
                <div class="sub-title">水电办公培训成本</div>
            </div>
        </div>
        <div class="advantage boxing">
            <div class="panel">
                <div class="imager step4"></div>
                <div class="title">专属经济人</div>
                <div class="sub-title">项目对接群全程追踪</div>
            </div>
        </div>
    </div>
</div>

<!-- newly designer -->
<div class="contenter mt-20px" id="newly-designer">
    <div class="titler"><a class="more" href="<?= Url::to('@web/search/designer') ?>">查看更多</a><span class="h3 cl-red">新晋设计师</span>总会给你一些新的惊喜</div>
    <div class="conter clear">
        <?php foreach($newlyDesigner as $designer) {
            ?>
        <div class="designer-detail split4 boxing">
            <div class="panel">
                <div class="header">
                    <div class="imager"><img src="<?= Render::upload($designer->photo) ?>"></div>
                    <div class="user">
                        <h3 class="username"><?= $designer->nickname ?></h3>
                        <p class="star cl-red"><?= Render::star($designer->star) ?></p>
                    </div>
                </div>
                <div class="bodyer">
                    <p class="styles-hide">类目：<span class="categories"><?= $designer->categoriesString ?></span></p>
                    <p class="styles-hide">风格：<span class="styles"><?= $designer->stylesString ?></span></p>
                    <p>软件：<?= $designer->skills ?></p>
                    <div class="into">
                        <p>薪资：<?= Render::amount($designer->salary, 0) ?>元</p>
                        <p><a class="into-ensume" href="<?= Url::to('@web/seer/resume?id='.$designer->id) ?>">进入简历 &gt;</a></p>
                    </div>
                </div>
            </div>
        </div>
            <?php
        }
        ?>
    </div>
</div>

<!-- employment steps -->
<div class="mt-20px" id="employment-steps">
    <div class="contenter">
        <div class="titler"><span class="h3 cl-red">雇佣流程</span>告别线下无休止的约谈面试，迎接在线全职（OFT）全新时代</div>
        <div class="conter clear">
            <div class="employment-steps boxing">
                <div class="panel">
                    <div class="imager step1"></div>
                    <div class="title">沟通咨询</div>
                    <div class="sub-title">确定内容和完成期限</div>
                </div>
            </div>
            <div class="employment-steps boxing">
                <div class="panel">
                    <div class="imager step2"></div>
                    <div class="title">薪资托管</div>
                    <div class="sub-title">确认雇佣、填写需求、提供资料</div>
                </div>
            </div>
            <div class="employment-steps boxing">
                <div class="panel">
                    <div class="imager step3"></div>
                    <div class="title">设计制作</div>
                    <div class="sub-title">用心设计、按时完成、完美呈现</div>
                </div>
            </div>
            <div class="employment-steps boxing">
                <div class="panel">
                    <div class="imager step4"></div>
                    <div class="title">上传稿件</div>
                    <div class="sub-title">规定好时限内上传稿件，雇主查看</div>
                </div>
            </div>
            <div class="employment-steps boxing">
                <div class="panel">
                    <div class="imager step5"></div>
                    <div class="title">验收工作</div>
                    <div class="sub-title">效果确认，发放薪资设计师</div>
                </div>
            </div>
            <div class="employment-steps boxing">
                <div class="panel">
                    <div class="imager step6"></div>
                    <div class="title">服务结束</div>
                    <div class="sub-title">网传或安装，相互评价</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- hot design -->
<div class="contenter mt-20px" id="hot-design">
    <div class="titler"><a class="more" href="<?= Url::to('@web/search/design') ?>">查看更多</a><span class="h3 cl-red">人气设计师作品</span>好作品是设计师的第一张脸</div>
    <div class="conter clear">
        <?php foreach($recommendDesign as $design) {
            ?>
        <div class="design-detail boxing transition">
            <div class="panel">
                <div class="imager" style="background-image:url(<?= Render::upload($design->thumb) ?>);">
                    <a href="<?= Url::to('@web/seer/design?id='.$design->id) ?>"></a>
                </div>
                <div class="bodyer">
                    <div class="title"><?= $design->title ?><span class="design-style styles"><?= $design->style ?></span></div>
                    <div class="user clear">
                        <div class="view"><i class="icon-eye-open"></i><?= Render::number($design->view) ?></span></div>
                        <div class="collection"><i class="icon-heart cl-red"></i><?= Render::number($design->collection) ?></div>
                        <div class="photo"><img src="<?= Render::upload($design->designer->photo) ?>"></div>
                        <div class="username"><p><?= $design->designer->nickname ?></p><p class="cl-red fs-12px"><?= Render::star($design->designer->star) ?></p></div>
                    </div>
                </div>
            </div>
        </div>
            <?php
        }
        ?>
    </div>
</div>

<!-- cooperator -->
<div class="contenter mt-20px" id="cooperator">
    <div class="titler"><span class="h3 cl-light-black">合作品牌</span></div>
    <div class="conter clear">
        <?php foreach(Cooperator::find()->select('link, image')->orderBy('id asc')->limit(16)->asArray()->all() as $cooperator) {
            ?>
        <div class="cooperator boxing">
            <div class="panel">
                <div class="imager" style="background-image:url(<?= Render::upload($cooperator['image']) ?>);"></div>
            </div>
        </div>
        <?php
        }
        ?>
    </div>
</div>

<!-- employment -->
<div class="mt-20px" id="employment-banner">
    <div class="contenter">
        <div class="employment-banner">
            <div class="h3">全职设计师在线雇佣平台</div>
            <div class="sub">让在线全职成为一种雇佣习惯</div>
            <div class="employment-button">
                <a class="flyer-button normal border-round huge" href="<?= Url::to('@web/employer/recruit') ?>">发布需求</a>
                <a class="flyer-button normal border-round huge" href="<?= Url::to('@web/search/designer') ?>">找员工</a>
            </div>
        </div>
    </div>
</div>

<div id="render" style="display:none;">
    <?= Render::select('style', \common\models\Design::$styleSelector, null) ?>
</div>
<script src="<?= Url::to('@web/web/static/js/ft-carousel.min.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/categorier.class.js') ?>"></script>
<script src="<?= Render::static('system/category-design.data.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    //滚动条
    $(function(){
        $('.slide .icon li').not('.up,.down').mouseenter(function(){
            $('.slide .info').addClass('hover');
            $('.slide .info li').hide();
            $('.slide .info li.'+$(this).attr('class')).show();//.slide .info li.qq
        });
        $('.slide').mouseleave(function(){
            $('.slide .info').removeClass('hover');
        });

        $('#btn').click(function(){
            $('.slide').toggle();
            if($(this).hasClass('index_cy')){
                $(this).removeClass('index_cy');
                $(this).addClass('index_cy2');
            }else{
                $(this).removeClass('index_cy2');
                $(this).addClass('index_cy');
            }

        });

    });

    var categorierClass = new categorier();
    $(document).ready(function() {
        // 初始化分类选择
        categorierClass.init({ fix: false, dom: '#category', data: DesignCategories, relate: DesignCategoriesRelation, start: '<?= Yii::$app->params['designCategories'] ?>' });
        // banner
        $("#banner .ft-carousel").FtCarousel();
        // 美化FORM
        (new flyer).init({ form: '#info-search' });
        $('#search-type').bind('change', function() {
            if($(this).val() == '2') {
                $('#info-search').attr('action', '<?= Url::to('@web/search/design') ?>');
            }
            else {
                $('#info-search').attr('action', '<?= Url::to('@web/search/designer') ?>');
            }
        });
        // 推荐设计师翻页
        $('#show-window .move-button').bind('click', function() {
            var left = parseInt($('#show-window .move-window').css('marginLeft'));
            if($(this).hasClass('left')) {
                left += 1200;
                if(left > 0) {
                    left = -2400;
                }
            }
            else {
                left -= 1200;
                if(left < -2400) {
                    left = 0;
                }
            }
            $('#show-window .move-window').animate({ 'marginLeft': left + 'px' }, 'fast');
        });
        // 分类
        categorierClass.init({
            data: DesignCategories,
            relate: DesignCategoriesRelation,
            start: '<?= Yii::$app->params['designCategories'] ?>'
        });

        // 名称显示
        tableHandler.renderCategory({ category: $('.styles'), select: '#render select[name=style]', color: false, splite: '，', default: '--' });
        tableHandler.renderCategory({ category: $('.categories'), color: false, splite: '，', default: '--', functionName: function(id) {
            return categorierClass.renderTitles(id);
        }});
    });
</script>